{% extends "base.html" %}
{% load static %}

{% block title %}
产品详情
{% endblock %}

{% block content %}
<link href="{% static 'css/products.css' %}" rel="stylesheet">
<!-- 主体内容 -->
<div class="container">
    <div class="model-details-product-title" style="color: aliceblue;">
        {{product.title}}
    </div>
    <div class="model-details" style="color: aliceblue;">
        {% for img in product.productImgs.all %}
        <div class="row-4">
            <img class="img-responsive" src="{{img.photo.url}}">
        </div>
        {% endfor %}
        <h3>博客介绍</h3>
        <p>
            {{product.description|linebreaks}}
        </p>
    </div>
</div>
<body>
    <div class="container">
      <h3 class="mt-5" style="color: aliceblue;">评论区</h3>
      <div id="feedbackContainer" class="mt-3"></div>
      <div class="mt-3">
        <label for="feedbackText" class="form-label" style="color: aliceblue;">您的评论:</label>
        <textarea class="form-control" id="feedbackText" rows="5"></textarea>
      </div>
      <div class="mt-3">
        <button type="button" class="btn btn-primary" onclick="submitFeedback()">发送</button>
      </div>
    </div>
  
    <!-- 引入 Bootstrap Bundle 包含 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // 检查本地存储中是否有评论，如果有则显示
      window.onload = function() {
        var savedComments = localStorage.getItem('feedbackComments');
        if (savedComments) {
          document.getElementById('feedbackContainer').innerHTML = savedComments;
        }
      };
  
      function submitFeedback() {
        // 获取用户输入的反馈内容
        var feedback = document.getElementById('feedbackText').value;
  
        // 在此处您可以将 feedback 发送到后端进行处理，例如保存到数据库
  
        // 将评论内容显示在页面中
        var feedbackContainer = document.getElementById('feedbackContainer');
        var commentElement = document.createElement('div');
        commentElement.classList.add('alert', 'alert-success', 'mt-3');
        commentElement.textContent = feedback;
        feedbackContainer.insertBefore(commentElement, feedbackContainer.firstChild);
  
        // 将评论内容保存到本地存储
        var savedComments = localStorage.getItem('feedbackComments') || '';
        savedComments = '<div class="alert alert-success mt-3">' + feedback + '</div>' + savedComments;
        localStorage.setItem('feedbackComments', savedComments);
  
        // 清空文本框
        document.getElementById('feedbackText').value = '';
      }
    </script>
  </body>
{% endblock %}